<template>
	<view class="otherPhone">
		<view class="content">
			<view class="bindnumber">
				绑定手机号
			</view>
			<view class="text">
				为防止账号丢失以及方便找回，建议您绑定手机号码后再使用
			</view>
			<view class="input" v-if="submission == 1">
				<view class="left">
					+86
				</view>
				<view class="right">
					<input v-model="phone" type="text" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="input" v-else>
				<view class="right">
					<input v-model="code" type="text" placeholder="请输入验证码" />
				</view>
			</view>
			<view class="btn" @click="submit(1)" v-if="submission == 1">
				获取短信验证码
			</view>
			<view class="btn" @click="submit" v-else>
				提交验证码
			</view>
		</view>
	</view>
</template>

<script setup>
	import {bindingPhone} from '/api/bindingPhone.js'
	import {
		ref
	} from 'vue';
	const phone = ref('')
	const code = ref('')
	const submission = ref(1)
	
	//提交
	const submit = (e) => {
		//获取
		if (e == 1) {
			if (phone.value == '') {
				uni.showToast({
					title: "电话号码不能为空",
					icon: "none"
				})
				return
			} else if (!(/^1[13456789]\d{9}$/.test(phone.value))) {
				uni.showToast({
					title: "手机号码不正确",
					icon: 'none'
				})
				return
			}
			console.log('获取', phone.value);
			submission.value = 2
			let params = {}
			bindingPhone().then(res => {
				console.log('绑定手机号',res)
			})
		} else {
			//提交
			console.log('提交', code.value);
		}
	}
</script>

<style lang="scss" scoped>
	.otherPhone {
		.content {
			padding: 0 78rpx;
			padding-top: 180rpx;

			.bindnumber {
				font-size: 46rpx;
				margin-bottom: 20rpx;
			}

			.text {
				font-size: 22rpx;
				margin-bottom: 40rpx;
			}

			.input {
				width: 100%;
				height: 60rpx;
				background-color: #F5F2F2;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				padding: 0 20rpx;

				.left {
					margin-right: 20rpx;
				}

				.right input {
					width: 420rpx;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FF8C8C;
				border-radius: 20rpx;
				height: 80rpx;
				width: 600rpx;
				color: #fff;
				// font-size: 22rpx;
			}
		}
	}
</style>